<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-25 20:03:47
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2022-05-27 17:12:16
 * @FilePath: \tea-garden-web\src\components\component-subject-button-group.vue
 * @Description: 专题-按钮组
-->
<template>
  <div class="button-group">
    <el-button
      class="button"
      :class="{ active: active === item.value }"
      v-for="(item, index) in buttons"
      :key="index"
      @click="$emit('change', item.value)"
      v-text="item.name"
    >
    </el-button>
  </div>
</template>

<script>
export default {
  props: {
    buttons: {
      type: Array,
      default: function () {
        return [{ name: '按钮1', value: '0' }, { name: '按钮2', value: '1' }]
      }
    },
    active: {
      type: String,
      default: '0'
    }
  }
}
</script>

<style lang="scss">
.button-group {
  .el-button {
    padding: 0 8px!important;
  }
  .button {
    background: #e6f5f6;
    color: #089bab;
  }
  .active {
    background: #089bab;
    color: #ffffff;
  }
}
</style>
